<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Form Binding Example</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="Application">
    <input v-model="userName">
    <p>Username: {{userName}}</p>
    <input v-model.lazy="userNameLazy">
    <p>Username (lazy): {{userNameLazy}}</p>
    <input v-model.trim="userNameTrim">
    <p>Username (trim): {{userNameTrim}}</p>
    <textarea v-model="userContent"></textarea>
    <p style="white-space: pre-line">Content: {{userContent}}</p>
    <input type="checkbox" v-model="selectedSports" value="soccer">Soccer
    <input type="checkbox" v-model="selectedSports" value="volleyball">Volleyball
    <input type="checkbox" v-model="selectedSports" value="basketball">Basketball
    <p>Selected Sports: {{selectedSports}}</p>
    <input type="radio" value="male" v-model="gender">Male
    <input type="radio" value="female" v-model="gender">Female
    <p>Gender: {{gender}}</p>
    <input type="radio" value="22" v-model="userAge">22
    <input type="radio" value="23" v-model="userAge" checked>23
    <p>Age: {{userAge}}</p>
    <select v-model="selectedOption">
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
    </select>
    <p>Selected Option: {{selectedOption}}</p>
</div>
<script>
    const App = {
        data() {
            return {
                userName: "",
                userNameLazy: "",
                userNameTrim: "",
                userContent: "",
                selectedSports: [],
                gender: "",
                userAge: 23,
                selectedOption: ""
            };
        }
    };
    Vue.createApp(App).mount("#Application");
</script>
</body>
</html>
